@charset "UTF-8";
/**
 * xiaobai
 * flexbox布局方式
 */
/**
 * 向从左到右排列（左对齐）
 * <div class="fx-row"></div>
 */
.fx-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row; }

/**
 * 向从左到右排列（右边对齐）
 * <div class="fx-row"></div>
 */
.fx-row-reverse {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-direction: reverse;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

/**
 * 纵向从上往下排列（顶对齐）
 * <div class="fx-column"></div>
 */
.fx-column {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }

/**
 * 纵向从上往下排列（底部对齐）
 * <div class="fx-column"></div>
 */
.fx-column-reverse {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-direction: reverse;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column-reverse;
  -moz-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse; }

/**
 * wrap策略
 */
.fx-wrap {
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

/**
 * 子项目排列
 * <div class="fx-col"></div>
 */
.fx, .fx-1, .fx-2, .fx-3, .fx-4, .fx-5, .fx-6, .fx-7, .fx-8, .fx-9 {
  display: block;
  width: 100%; }

/** auto(1 1 auto) **/
.fx-auto {
  -webkit-box-flex: auto;
  -webkit-flex: auto;
  -moz-box-flex: auto;
  -moz-flex: auto;
  -ms-flex: auto;
  flex: auto; }

.fx-none {
  -webkit-box-flex: none;
  -webkit-flex: none;
  -moz-box-flex: none;
  -moz-flex: none;
  -ms-flex: none;
  flex: none; }

.fx {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1; }

.fx-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1; }

.fx-2 {
  -webkit-box-flex: 2;
  -webkit-flex: 2;
  -moz-box-flex: 2;
  -moz-flex: 2;
  -ms-flex: 2;
  flex: 2; }

.fx-3 {
  -webkit-box-flex: 3;
  -webkit-flex: 3;
  -moz-box-flex: 3;
  -moz-flex: 3;
  -ms-flex: 3;
  flex: 3; }

.fx-4 {
  -webkit-box-flex: 4;
  -webkit-flex: 4;
  -moz-box-flex: 4;
  -moz-flex: 4;
  -ms-flex: 4;
  flex: 4; }

.fx-5 {
  -webkit-box-flex: 5;
  -webkit-flex: 5;
  -moz-box-flex: 5;
  -moz-flex: 5;
  -ms-flex: 5;
  flex: 5; }

.fx-6 {
  -webkit-box-flex: 6;
  -webkit-flex: 6;
  -moz-box-flex: 6;
  -moz-flex: 6;
  -ms-flex: 6;
  flex: 6; }

.fx-7 {
  -webkit-box-flex: 7;
  -webkit-flex: 7;
  -moz-box-flex: 7;
  -moz-flex: 7;
  -ms-flex: 7;
  flex: 7; }

.fx-8 {
  -webkit-box-flex: 8;
  -webkit-flex: 8;
  -moz-box-flex: 8;
  -moz-flex: 8;
  -ms-flex: 8;
  flex: 8; }

.fx-9 {
  -webkit-box-flex: 9;
  -webkit-flex: 9;
  -moz-box-flex: 9;
  -moz-flex: 9;
  -ms-flex: 9;
  flex: 9; }

/**
 * 栅格布局
 */
.gird-5 {
  width: 5%; }

.gird-10 {
  width: 10%; }

.gird-15 {
  width: 15%; }

.gird-20 {
  width: 20%; }

.gird-25 {
  width: 25%; }

.gird-30 {
  width: 30%; }

.gird-33 {
  width: 33.333333333333336%; }

.gird-40 {
  width: 40%; }

.gird-50 {
  width: 50%; }

.gird-60 {
  width: 60%; }

.gird-66 {
  width: 66.66666666666666%; }

.gird-70 {
  width: 70%; }

.gird-75 {
  width: 75%; }

.gird-80 {
  width: 80%; }

.gird-85 {
  width: 85%; }

.gird-90 {
  width: 90%; }

.gird-95 {
  width: 95%; }

.gird-100 {
  width: 100%; }

/**
 * 垂直方向
 * 子元素沿着侧轴排列方式
 * align-items : flex-start | flex-end | center | baseline | stretch;
 */
.fx-row-top {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start; }

.fx-row-bottom {
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end; }

.fx-row-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center; }

.fx-row-stretch {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  align-items: stretch; }

.fx-row-baseline {
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  -webkit-align-items: baseline;
  -moz-align-items: baseline;
  align-items: baseline; }

/**
 * 水平方向
 * 子元素沿着主轴排列方式
 * justify-content: flex-start | flex-end | center | space-between | space-around;
 */
.fx-row-left {
  -webkit-box-pack: flex-star;
  -ms-flex-pack: flex-star;
  -webkit-justify-content: flex-star;
  -moz-justify-content: flex-star;
  justify-content: flex-star; }

.fx-row-middle {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center; }

.fx-row-right {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end; }

.fx-row-space-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between; }

.fx-row-space-around {
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around; }

/**
 * 覆盖父元素的align-items属性，定义了单独的弹性子元素如何沿着侧轴排列
 */
.fx-col-top {
  -webkit-align-self: flex-start;
  -moz-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start; }

.fx-col-bottom {
  -webkit-align-self: flex-end;
  -moz-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end; }

.fx-col-center {
  -webkit-align-self: center;
  -moz-align-self: center;
  -ms-flex-item-align: center;
  align-self: center; }

.fx-col-left {
  -webkit-align-content: flex-start;
  -moz-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start; }

.fx-col-right {
  -webkit-align-content: flex-end;
  -moz-align-content: flex-end;
  -ms-flex-line-pack: end;
  align-content: flex-end; }

.fx-col-middle {
  -webkit-align-content: center;
  -moz-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center; }

.fx-col-space-between {
  -webkit-align-content: space-between;
  -moz-align-content: space-between;
  -ms-flex-line-pack: space-between;
  align-content: space-between; }

.fx-col-space-around {
  -webkit-align-content: space-around;
  -moz-align-content: space-around;
  -ms-flex-line-pack: space-around;
  align-content: space-around; }

/*# sourceMappingURL=flex.css.map */
.batc{
  position: fixed;top: 0;background:rgba(0,0,0,0.4) ;
  width: 100vw;height: 100vh;display: flex;flex-direction: column;align-items: center;
  justify-content: center;z-index: 99;
}
